<template>
  <el-tabs v-model="activeName" tabPosition="right">
    <el-tab-pane label="详情" name="Edit">
      <transition name="el-zoom-in-center">
        <Edit @goto-list="gotoList" :item="editObj" ref="edit" />
      </transition>
    </el-tab-pane>
    <el-tab-pane label="列表" name="List">
      <transition name="el-zoom-in-center">
        <List @goto-edit="gotoEdit" />
      </transition>
    </el-tab-pane>
  </el-tabs>
</template>

<script>
import Edit from './Edit'
import List from './List'
export default {
  components: {
    Edit,
    List,
  },
  methods: {
    gotoList() {
      this.activeName = 'List'
    },
    gotoEdit(param) {
      this.activeName = 'Edit'
      this.editObj = param
      if (param !== undefined) {
        this.$refs.edit.itemChange(param)
      }
    },
  },
  data() {
    return {
      activeName: 'Edit',
      editObj: {},
    }
  },
}
</script>